import React, {Component} from "react";
import Form from "antd/es/form";
import Radio from "antd/es/radio";
import {Input, Modal} from "antd";
import Button from "antd/es/button";
import {Api, errorMsg, successMsg} from "@/util/global";
import Http from '@/util/http';
import BuildVCode, {SaveInputVCode} from "@/util/BuildVCode";
import {connect} from "react-redux";
import {AdminConsole_mapStateToProps} from "../../index";

class BanDialog extends Component {

    formRef = React.createRef();

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            banType: '',
            banUser: this.props.SelectedUser[0]['userid'],
            banRemark: '',
            code: this.props.VerificationCode
        }
    }

    componentDidMount() {
        BuildVCode('VCodeImage');
    }

    async handleClick() {
        await this.formRef.current.validateFields().then(res => {
            let postData = {
                userId: this.state.banUser,
                status: this.state.banType,
                remark: this.state.banRemark
            }

            Http.put(Api.changeStatus, postData).then(res => {
                if (res.success) {
                    successMsg(res.message)
                    console.log(this.props);
                    this.props.handleInitUserList();
                }
            })
        }).catch(err => {
            let failKey = [];
            err['errorFields'].forEach(item => {
                failKey.push(item['name'][0]);
            })
            errorMsg(failKey.toString() + " 不能为空")
        });
    }

    render() {
        const {onCancel, show, banTypeTemp} = this.props

        return (
            <Modal
                destroyOnClose={true}
                title="封禁用户"
                centered
                onCancel={() => onCancel()}
                visible={show}
                width={1000}
                footer={[
                    <Button key='submit' type="primary" onClick={() => this.handleClick()} htmlType="submit">
                        提交
                    </Button>,
                    <Button key='cancel' htmlType="button" onClick={() => onCancel()}
                            style={{marginLeft: "10px"}}>
                        取消
                    </Button>
                ]}
            >
                {/*<Button onClick={() => testVCode()}>测试验证码</Button>*/}
                <Form
                    ref={this.formRef}
                    name="basic"
                    labelCol={{span: 8}}
                    wrapperCol={{span: 16}}
                    initialValues={{remember: true}}
                    layout={'vertical'}
                >
                    <Form.Item
                        label="封禁类型"
                        name="封禁类型"
                        rules={[{required: true, message: '请选择要给予的封禁类型。'}]}
                        trigger={'onChange'}
                    >
                        <Radio.Group value={this.state.banType}
                                     onChange={(e) => this.setState({banType: e.target.value})}>
                            {
                                banTypeTemp.map((item, index) => {
                                    return <Radio.Button value={item['statusId']}
                                                         key={index}>
                                        {item['statusName']}
                                    </Radio.Button>
                                })
                            }
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="封禁原因描述"
                        name="封禁原因描述"
                        rules={[{required: true, message: '请填写封禁原因描述，以供相关人员查看。'}]}
                        trigger={'onChange'}
                    >
                        <Input.TextArea
                            id={'ban_user_remark'}
                            maxLength={'50'}
                            onChange={(e) => this.setState({banRemark: e.target.value})}
                            value={this.state.banRemark}
                            placeholder={'请输入封禁原因'}
                            rows={'5'}
                            allowClear
                        />
                    </Form.Item>
                    <label style={{marginTop: '10px', fontSize: '12px'}}>请输入验证码</label>
                    <br/>
                    <img id={'VCodeImage'} style={{border: '1px solid black'}}
                         onClick={() => BuildVCode('VCodeImage')}/>
                    <Form.Item
                        name="验证码"
                        rules={[{required: true, message: '请填写验证码。'}]}
                        trigger={'onChange'}
                    >

                        <Input style={{width: '100px'}} size={'small'} maxLength={4} value={this.state.code}
                               onChange={(e) => SaveInputVCode(e.target.value)}/>
                    </Form.Item>
                </Form>
            </Modal>
        )
    }
}


const mapDispatchToProps = (dispatch) => {
    return {}
}
export default connect(AdminConsole_mapStateToProps, mapDispatchToProps)(BanDialog);
